<template>
    <div class="cabinet-properties"
        style="background: var(--color-background); padding: 1rem; border-radius: var(--border-radius-lg);">
        <h3 style="margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem;">
            <span style="font-size: 1.5em;">{{ CabinetTypeConfig[cabinet.type].icon }}</span>
            机柜属性
        </h3>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">名称:</label>
            <input v-model="cabinet.name" type="text"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">描述:</label>
            <textarea v-model="cabinet.description"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; min-height: 60px; resize: vertical;"></textarea>
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">类型:</label>
            <select v-model="cabinet.type"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;">
                <option v-for="(config, type) in CabinetTypeConfig" :key="type" :value="type">
                    {{ config.icon }} {{ config.name }}
                </option>
            </select>
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">宽度 (mm):</label>
            <input v-model.number="cabinet.width" type="number" min="500" max="1000"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;" />
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">高度 (mm):</label>
            <input v-model.number="cabinet.height" type="number" min="1000" max="3000"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;"
                disabled />
            <small style="color: var(--color-text-light-2); font-size: 0.8em;">继承自列高度</small>
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">深度 (mm):</label>
            <input v-model.number="cabinet.depth" type="number" min="600" max="1500"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px;"
                disabled />
            <small style="color: var(--color-text-light-2); font-size: 0.8em;">继承自列深度</small>
        </div>

        <div style="margin-bottom: 0.5rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">颜色:</label>
            <input v-model="cabinet.color" type="color"
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; height: 40px;" />
        </div>

        <div style="margin-bottom: 1rem;">
            <label style="display: block; margin-bottom: 0.25rem; font-weight: 500;">设备数量:</label>
            <div
                style="padding: 0.5rem; background: var(--color-background-soft); border-radius: 4px; color: var(--color-text-light);">
                {{ cabinet.devices.length }} 个设备 | 占用: {{ cabinet.occupiedUnits }}U/47U | 功耗: {{
                    cabinet.totalPowerConsumption }}W
            </div>
        </div>

        <!-- 设备管理 -->
        <DeviceManager :cabinet="cabinet" />

        <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
            <button @click="$emit('deselect')"
                style="flex: 1; padding: 0.5rem; background: var(--color-text-light); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                取消选择
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Cabinet } from '@/stores/datacenter'
import { CabinetTypeConfig } from '@/stores/datacenter'
import DeviceManager from './DeviceManager.vue'

interface Props {
    cabinet: Cabinet
}

defineProps<Props>()

defineEmits<{
    'deselect': []
}>()
</script>